<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="containerCode" style="display: flex;">
				<span style="margin-right: 20rpx;text-align: center;">容器号</span>
				<u--input
					placeholder="请扫描需合并的容器号"
					v-model="query.containerCode"
					suffixIcon="scan"
					@confirm="getDetailOld"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;">
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="materialCode" style="display: flex;">
				<span style="margin-right: 20rpx;text-align: center;">物料号</span>
				<u--input 
					placeholder="请输入/扫描物料号"
					v-model="query.materialCode"
					suffixIcon="scan"
					@confirm="getBoxNo"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;">
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="targetContainerCode" style="display: flex;">
				<span style="margin-right: 20rpx;text-align: center;">容器号</span>
				<u--input
					placeholder="请输入/扫描目标容器号"
					v-model="query.targetContainerCode"
					suffixIcon="scan"
					@confirm="getDetail"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;">
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="quantity" style="display: flex;">
				<span style="margin-right: 50rpx;text-align: center;">数量</span>
				<u--input
					placeholder="请填写物料数量"
					v-model="query.quantity"
					style="flex: 1;">
				</u--input>
			</u-form-item>
		</u--form>
		<view style="position: fixed; bottom: 0; left: 0; width: 100%; padding: 10rpx; background-color: #fff; display: flex; justify-content: space-between;box-sizing: border-box;">
			<u-button type="primary" style="margin-right: 20rpx;" @click="submit">确认</u-button>
			<u-button type="primary" @click="reset">重置</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { containerDetail, bind, getBoxNoAPI, getDetailAPI } from '@/api/work/move.js'
	import uniDataSelect from '@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue';
	export default {
		components: {
			uniDataSelect
		},
		data() {
			return {
				query: {
					containerCode: '',
					materialCode: '',
					targetContainerCode: '',
					quantity: ''
				},
				selectBox: '',
				boxNos: [],
				selectMaterial: '',
				isolationArea: '',
				list: [],
				isolationAreaOld: '',
				listOld: [],
				value: 1,
			};
		},
		watch: {
			'boxNos' (newList) {
				if (newList.length === 1) {
					this.selectBox = newList[0].value
					const material = this.listOld.find(v => v === this.selectBox)
					this.selectMaterial = material
				}
			}
		},
		onLoad(options) {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},
		onUnload() {  
		  // 移除监听事件      
		  uni.$off('scancodedate')
		},
		methods: {
			getCode(code) {
				if(this.query.materialCode === '') {
					this.query.containerCode = code
					this.getDetailOld()
				}
				if(code.length === 6) {
					this.query.materialCode = code
					this.checkMaterial()
				}
				if(this.query.containerCode !== '' && this.query.materialCode !== '') {
					this.query.targetContainerCode = code
					this.getDetail()
				}
			},
			async getDetailOld() {
				// const res = await containerDetail({ containerCode: this.query.containerCode })
				// this.isolationAreaOld = res.data.container.isolationArea
				// this.listOld = res.data.container.containerDetailList
				const res = await getDetailAPI(this.query.containerCode)
				if (res.code === 200) {
					console.log(res.data)
				}
			},
			async getDetail() {
				const res = await containerDetail({ containerCode: this.query.targetContainerCode })
				this.isolationArea = res.data.container.isolationArea
				this.list = res.data.container.containerDetailList.map(v => {
					return {
						...v,
						checked: false
					}
				})
			},
			async getBoxNo() {
				const res = await getBoxNoAPI({
					materialCode: this.query.materialCode,
					containerCode: this.query.containerCode
				})
				this.boxNos = res.map(item => {
					return {
						value: item,
						text: item
					}
				})
			},
			change(e) {
				this.selectBox = e
				const material = this.listOld.find(v => v.boxNo === e)
				this.selectMaterial = material
			},
			// 提交
			async submit() {
				const { boxNo } = this.list.find(v => v.checked === true)
				const submitForm = {
					bindNumber: this.query.quantity,
					oldContainerCode: this.query.containerCode,
					newContainerCode: this.query.targetContainerCode,
					oldBoxNo: this.selectMaterial.boxNo,
					newBoxNo: boxNo,
					materialCode: this.selectMaterial.materialCode,
					materialBatch: this.selectMaterial.materialBatch,
					unit: this.selectMaterial.unit
				}
				const isFormValid = Object.values(submitForm).every(value => value !== null && value !== undefined && value !== '')
				if(!isFormValid) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '提交失败: 有字段为空!请将表单填写完整'
					})
				}
				console.log(submitForm)
				const res = await bind(submitForm)
				if(res.meta.code === 200) {
					this.query = {
						containerCode: '',
						materialCode: '',
						targetContainerCode: '',
						quantity: ''
					}
					this.isolationArea = ''
					this.list = []
					this.isolationAreaOld = ''
					this.listOld = [],
					this.selectMaterial = ''
					this.selectBox = ''
					this.boxNos = []
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
					return
				} else {
					this.query = {
						containerCode: '',
						materialCode: '',
						targetContainerCode: '',
						quantity: ''
					}
					this.isolationArea = ''
					this.list = []
					this.isolationAreaOld = ''
					this.listOld = [],
					this.selectMaterial = ''
					this.selectBox = ''
					this.boxNos = []
					return this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
				}
			},
			// 重置
			reset() {
				this.query = {
					containerCode: '',
					materialCode: '',
					targetContainerCode: '',
					quantity: ''
				}
				this.isolationArea = ''
				this.list = []
				this.isolationAreaOld = ''
				this.listOld = [],
				this.selectMaterial = ''
				this.selectBox = ''
				this.boxNos = []
			},
			radioChange(val) {
				this.list.forEach((item, index) => {
					if('radio'+ index === val.detail.value) {
							item.checked = true
					} else {
						item.checked = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
